{% include '/templates/admin_header.html' %}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>

<!-- Content - Existing Reserved Pushes -->
<div id="content" class="flex">
  <h1>zerodyproject-d Pushes</h1>
  <div id="pushes">
    <div class="module" id="changelist">
      <div class="results">
        <table id="result_list">
          <thead>
            <tr>
              <th scope="col" class="sortable">
                <div class="text">ID</div>
                <div class="clear"></div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Created At</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Status</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Platforms</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Application Version</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Asset Version</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Users</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Reserved At</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Deadline At</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Title</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Message</div>
              </th>
              <th scope="col" class="sortable">
                <div class="text">Badge (IOS only)</div>
              </th>
            </tr>
          </thead>
          <tbody>
            {% for push in pushes %}
            <tr class="row{{ push.index % 2 }}">
              <th>{{push.id}}</th>
              <td>{{push.created_at}}</td>
              <td>{{push.step}}</td>
              <td>{{push.platform_name}}</td>
              <td>{{push.application_version}}</td>
              <td>{{push.asset_version}}</td>
              <td>{{push.user_ids}}</td>
              <td>{{push.reserved_at}}</td>
              <td>{{push.deadline_at}}</td>
              <td>{{push.title}}</td>
              <td>{{push.message}}</td>
              <td>{{push.badge}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- End Content - Existing Reserved Pushes -->
<!-- Content - Add Reserved Pushes -->
<script type="text/javascript">
	var targets = "";
	function validateForm() {
		if (document.adding_form.message.value == "") {
			alert("Required fields must be filled out!");
			return false;
		}

		if (document.adding_form.platforms[0].selected) {
			targets = "IOS";
		}
		if (document.adding_form.platforms[1].selected) {
			if (targets == "") {
				targets = "PlayStore";
			} else {
				targets = targets + ", PlayStore";
			}
		}

		if (confirm(targets + "\n" + document.adding_form.title.value + "\n"
				+ document.adding_form.message.value + "\n\n예약하시겠습니까?")) {
			document.adding_form.submit();
		} else {
			return false;
		}
		return true;
	}
</script>
<script type="text/javascript">
	function sendForm() {
		if (document.send_form.message.value == "") {
			alert("Required fields must be filled out!");
			return false;
		} else if (document.send_form.user_ids.value == "") {
			alert("Required fields must be filled out!");
			return false;
		}
		if (confirm(document.send_form.title.value + "\n"
				+ document.send_form.message.value + "\n\n전송하시겠습니까?")) {
			document.send_form.submit();
		} else {
			return false;
		}
		return true;
	}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
	
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
	
</script>
<script src="/static/js/jquery-ui-timepicker-addon.js" type="text/javascript">
	
</script>
<script type="text/javascript">
	jQuery(function($) {
		var now = new Date(), after = new Date();
		var n_yy = now.getFullYear(), n_mm = now.getMonth() + 1, n_dd = now
				.getDate();
		var n_hh = now.getHours(), n_ii = now.getMinutes(), n_ss = now
				.getSeconds();
		var n_date = n_yy + "-" + (n_mm < 10 ? "0" + n_mm : n_mm) + "-"
				+ (n_dd < 10 ? "0" + n_dd : n_dd);
		var n_hour = (n_hh < 10 ? "0" + n_hh : n_hh) + ":"
				+ (n_ii < 10 ? "0" + n_ii : n_ii) + ":"
				+ (n_ss < 10 ? "0" + n_ss : n_ss);

		after.setHours(after.getHours() + 1);
		var a_yy = after.getFullYear(), a_mm = after.getMonth() + 1, a_dd = after
				.getDate();
		var a_hh = after.getHours(), a_ii = after.getMinutes(), a_ss = after
				.getSeconds();
		var a_date = a_yy + "-" + (a_mm < 10 ? "0" + a_mm : a_mm) + "-"
				+ (a_dd < 10 ? "0" + a_dd : a_dd);
		var a_hour = (a_hh < 10 ? "0" + a_hh : a_hh) + ":"
				+ (a_ii < 10 ? "0" + a_ii : a_ii) + ":"
				+ (a_ss < 10 ? "0" + a_ss : a_ss);

		$('#id_reserved_date_0').val(n_date);
		$('#id_reserved_date_1').val(n_hour);

		$("#id_deadline_date_0").val(a_date);
		$('#id_deadline_date_1').val(a_hour);

		$('#id_reserved_date_1,#id_deadline_date_1').timepicker({
			timeFormat : 'HH:mm:ss',
			stepHour : 1,
			stepMinute : 1,
			stepSecond : 1,
			buttonImageOnly : true,
			buttonImage : '/static/img/time.png',
			showOn : "button"
		});

		$("#id_reserved_date_0,#id_deadline_date_0").datepicker(
				{
					monthNamesShort : [ '1월', '2월', '3월', '4월', '5월', '6월',
							'7월', '8월', '9월', '10월', '11월', '12월' ],
					dayNamesMin : [ '일', '월', '화', '수', '목', '금', '토' ],
					weekHeader : 'Wk',
					minDate : new Date(),
					dateFormat : 'yy-mm-dd', //형식(2012-03-03)
					autoSize : false, //오토리사이즈(body등 상위태그의 설정에 따른다)
					changeMonth : true, //월변경가능
					changeYear : true, //년변경가능
					showMonthAfterYear : true, //년 뒤에 월 표시
					buttonImageOnly : true, //이미지표시
					buttonImage : '/static/img/calendar.png', //이미지주소
					showOn : "button", //엘리먼트와 이미지 동시 사용
					setDate : "today"
				});

		$(this)
				.on(
						"change",
						'#id_reserved_date_0,#id_reserved_date_1',
						function() {
							var up_date = $("#id_reserved_date_0").val().split(
									"\-");
							var up_hour = $("#id_reserved_date_1").val().split(
									"\:");

							// new Date(year, month, day, hours, minutes, seconds, milliseconds);
							var temp = new Date(up_date[0], up_date[1],
									up_date[2], up_hour[0], up_hour[1],
									up_hour[2]);
							var t_yy = temp.getFullYear(), t_mm = temp
									.getMonth(), t_dd = temp.getDate();
							var t_hh = temp.getHours(), t_ii = temp
									.getMinutes(), t_ss = temp.getSeconds();
							var t_date = t_yy + "-"
									+ (t_mm < 10 ? "0" + t_mm : t_mm) + "-"
									+ (t_dd < 10 ? "0" + t_dd : t_dd);
							var t_hour = (t_hh < 10 ? "0" + t_hh : t_hh) + ":"
									+ (t_ii < 10 ? "0" + t_ii : t_ii) + ":"
									+ (t_ss < 10 ? "0" + t_ss : t_ss);

							temp.setHours(temp.getHours() + 1);
							var a_yy = temp.getFullYear(), a_mm = temp
									.getMonth(), a_dd = temp.getDate();
							var a_hh = temp.getHours(), a_ii = temp
									.getMinutes(), a_ss = temp.getSeconds();
							var a_date = a_yy + "-"
									+ (a_mm < 10 ? "0" + a_mm : a_mm) + "-"
									+ (a_dd < 10 ? "0" + a_dd : a_dd);
							var a_hour = (a_hh < 10 ? "0" + a_hh : a_hh) + ":"
									+ (a_ii < 10 ? "0" + a_ii : a_ii) + ":"
									+ (a_ss < 10 ? "0" + a_ss : a_ss);

							$('#id_reserved_date_0').val(t_date);
							$('#id_reserved_date_1').val(t_hour);

							$("#id_deadline_date_0").val(a_date);
							$('#id_deadline_date_1').val(a_hour);
						});
	});
</script>
<form enctype="multipart/form-data" onsubmit="return(validateForm());" action="/admin/pushes" method="post" name="adding_form">
  <div id="content" class="flex">
    <h1>Add Reservation</h1>
    <div id="new-reservation">
      <fieldset class="module aligned ">
        <div>
          <label for="id_platform" class="required"> Platforms: </label> <select name="platforms" multiple size="2">
            <option value="1" selected>IOS</option>
            <option value="2" selected>PlayStore</option>
          </select>
        </div>
        <div class="form-row field-application-version">
          <div>
            <label for="id_app_version"> App.Ver(Negative to All): </label> <input id="id_app_version" type="number" class="vIntegerField" value="-1" name="app_version" maxlength="9999" />or less
          </div>
        </div>
        <div class="form-row field-asset-version">
          <div>
            <label for="id_asset_version"> Asset.Ver(Negative to All) </label> <input id="id_asset_version" type="number" class="vIntegerField" value="-1" name="asset_version" maxlength="9999" />or less
          </div>
        </div>
        <div class="form-row field-reserved_date">
          <div>
            <label for="id_reserved_date_0"> Reserved date (Blank to immediately): </label>
            <p class="datetime">
              Date: <input name="reserved_date_at" class="vDateField" type="text" id="id_reserved_date_0" style="width: 100px;" readonly /> <br /> Time: <input name="reserved_time_at" class="vTimeField" type="text" id="id_reserved_date_1" style="width: 100px;" readonly />
            </p>
          </div>
        </div>
        <div class="form-row field-deadline_date">
          <div>
            <label for="id_deadline_date_0"> deadline date (Blank to immediately): </label>
            <p class="datetime">
              Date: <input name="deadline_date_at" class="vDateField" type="text" id="id_deadline_date_0" value="" style="width: 100px;" readonly /> <br /> Time: <input name="deadline_time_at" class="vTimeField" type="text" id="id_deadline_date_1" style="width: 100px;" readonly />
            </p>
          </div>
        </div>
        <div class="form-row field-title">
          <div>
            <label for="id_title"> Title: </label>
            <div class="text">
              <input type="text" name="title" maxlength="16" size="80" />
            </div>
          </div>
        </div>
        <div class="form-row field-message">
          <div>
            <label for="id_message" class="required"> Message: </label>
            <div class="text">
              <textarea rows="2" cols="50" name="message" maxlength="48" style="width: 40%;"></textarea>
            </div>
          </div>
        </div>
        <div class="submit-row">
          <div style="float: left; margin: 0;">
            <a href="/admin/"><input type="button" value="Back " class="default" name="_back" style="cursor: pointer;" /></a>
          </div>
          <input type="submit" value="Save" class="default" name="_save" style="cursor: pointer;" />
        </div>
      </fieldset>
    </div>
  </div>
</form>
<form enctype="multipart/form-data" onsubmit="return(sendForm());" action="/admin/pushes" method="post" name="send_form">
  <div id="content" class="flex">
    <h1>Push to Users</h1>
    <div id="new-reservation">
      <fieldset class="module aligned ">
        <div class="form-row field-user-ids">
          <div>
            <label for="id_user_ids" style="width: 10%;"> Users (Blank to All): </label>
            <div class="text">
              <input type="text" name="user_ids" maxlength="9999" style="width: 85%;" />
            </div>
          </div>
        </div>
        <div class="form-row field-title">
          <div>
            <label for="id_title"> Title: </label>
            <div class="text">
              <input type="text" name="title" maxlength="16" size="80" />
            </div>
          </div>
        </div>
        <div class="form-row field-message">
          <div>
            <label for="id_message" class="required"> Message: </label>
            <div class="text">
              <textarea rows="2" cols="50" name="message" maxlength="48" style="width: 40%;"></textarea>
            </div>
          </div>
        </div>
        <div class="submit-row">
          <input type="submit" value="Send" class="default" name="_send" style="cursor: pointer;" />
        </div>
      </fieldset>
    </div>
  </div>
</form>
<!-- End Content - Add Reserved Pushes -->
{% include '/templates/admin_footer.html' %}
